<template>
  <el-dialog width="500px" title="订单发货" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div class="warn-box" style="padding:10px;margin-bottom: 7px;">
      <svg-icon style="margin-right:10px" icon-class="warn" :size="20" />
      <p style="color:#000000;line-height:23px">发货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作</p>
    </div>
    <div style="margin:0 auto 10px;display: block;width: 50%;">
      <el-button size="small" type="primary" @click="downloadWord(form.orderId)">点击下载&lt;租赁设备本人签收凭证&gt;</el-button>
    </div>
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="订单编号">
        <el-input v-model="form.orderId" disabled />
      </el-form-item>
      <el-form-item label="发货类型" prop="delivery_type">
        <el-radio-group v-model="form.delivery_type" @change="handleTypeChange">
          <el-radio :label="1">物流发货</el-radio>
          <el-radio :label="2">上门自取</el-radio>
          <el-radio :label="3">上门安装</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.delivery_type == 1" label="物流公司" prop="logistics_name">
        <el-select v-model="form.logistics_name" placeholder="请选择">
          <el-option v-for="(item, index) in logisticsNames" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.delivery_type == 1" label="物流单号" prop="logistics_no">
        <el-input v-model="form.logistics_no" clearable @input="val => changeInput(val)" />
      </el-form-item>
      <el-form-item label="发货凭证" prop="images">
        <crop-upload ref="cropUpload" :multiple="true" show-type="photo" :init-val="form.images" wrapper-width="100px" wrapper-height="100px" :photo-width="100" :photo-height="100" @setVal="imgChange" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deliverGoods, getLogisticAll, downloadWord } from '@/api/order'
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  // props: ['orderId'],
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        orderId: '',
        delivery_type: 1,
        logistics_name: '',
        logistics_no: '',
        images: []
      },
      params: {
        orderId: ''
      },
      rules: {
        delivery_type: [
          { required: true, message: '请选择发货类型', trigger: 'change' }
        ],
        logistics_name: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        logistics_no: [
          { required: true, message: '物流单号不能为空', trigger: 'blur' }
        ],
        images: [
          { required: true, message: '请上传发货凭证', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      logisticsNames: []
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.form = {
          orderId: this.orderId,
          delivery_type: 1,
          logistics_name: '',
          logistics_no: '',
          images: []
        }
        this.getSelect()
      } else {
        this.$refs['ruleForm'].resetFields()
      }
    }
  },
  methods: {
    downloadWord(orderId) {
      this.params.orderId = orderId
      downloadWord(this.params).then(res => {
        this.$message({
          message: res[0],
          type: 'success'
        })
      })
    },
    changeInput(value) {
      const pattern = /^[0-9a-zA-Z]*$/g
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.form.logistics_no = ''
      }
    },
    imgChange(val, type) {
      if (type === 'del') {
        this.form.images.splice(val, 1)
      } else {
        this.form.images.push(val)
      }
      this.$refs.cropUpload.sortList = this.form.images
    },
    handleTypeChange(val) {
      if (val !== 1) {
        this.form.logistics_name = ''
        this.form.logistics_no = ''
        this.form.images = []
      }
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = { ...this.form }
          params.images = params.images.join(',')
          deliverGoods(params).then(res => {
            this.dialogVisible = false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    getSelect() {
      getLogisticAll().then(res => {
        this.logisticsNames = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
</style>
